<!DOCTYPE html PUBLIC>
<html lang="en" lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <title>
      Breaks Test
    </title>

    <link rel="coverpage" href="images/cover.jpg" />

    <script src="../../../dist/paged.polyfill.js"></script>

		<style>
			@page {
				size: 'a4';
				margin: 22mm;
			}

      h2 {
        break-after: avoid;
      }

      section {
        break-after: always;
        break-before: right;
      }

      #breakAfter {
        break-after: always;
      }

      @media screen {
        .pagedjs_page {
          box-shadow: 0 0 0 1px rgba(0, 0,0,0.2);
        }
      }
		</style>

  </head>
<body>
  <section>
    <h1>Chapter 1</h1>
    <h2>Heading 1 (html h2) on multiple lines that you can read here, here is what i say about those nice headings</h2>
    <p id="afterh2">illum itaque minima, consequuntur suscipit repellat? Repellendus rerum at harum temporibus, illo aperiam ab pariatur dolores dignissimos distinctio voluptate, quibusdam aut ratione deleniti non ipsa id perspiciatis quas. Perspiciatis iste </p>
    <h3>Heading 2 on multiple lines that you can read here, here is what i say about those nice headings</h3>
    <p>et totam ipsam officiis quis obcaecati eius in reprehenderit ipsum! Nostrum iusto accusantium quibusdam fugit quam? Officiis, illo quasi porro pariatur et ipsa nisi necessitatibus </p>
    <h4>Third level heading Run-in is possible when the line is less</h4>
    <p>Reiciendis dolorem sit temporibus velit modi tempore, non delectus veritatis unde voluptas corporis eos, tempora in? Cupiditat</p>
    <h4>Heading 3 on multiple lines that you can read here, here is what i say about those nice headings</h4>
    <p>Reiciendis dolorem sit temporibus velit modi tempore, non delectus veritatis unde voluptas corporis eos, tempora in? Cupiditate quod quaerat deserunt cum omnis debitis non tempora, obcaecati nobis quis odit expedita distinctio? Harum similique placeat praesentium, voluptate qui esse repudiandae fugiat eveniet accusantium quibusdam cum perferendis hic quis assumenda incidunt facilis mollitia sunt sapiente rerum sit quo? Ab, nulla voluptatum enim autem iure perferendis expedita unde voluptatibus veritatis asperiores similique! Perferendis dolore quam beatae corrupti impedit! Ut, earum sint! Beatae similique sequi libero officia, officiis maiores iste necessitatibus reiciendis blanditiis eaque assumenda, tempore voluptates excepturi veniam neque id repellat nulla perferendis, ex quidem earum incidunt laudantium! Amet hic quam sunt voluptatem rerum? Accusantium quisquam mollitia at. Blanditiis ea porro odit. Unde accusamus hic dolorem eaque veniam aliquid consequatur dolorum, exercitationem deserunt esse nobis saepe commodi quasi possimus. Accusantium repellendus pariatur fuga quas suscipit excepturi sit praesentium quaerat quibusdam. Optio illum, quasi itaque, suscipit saepe eius minima, explicabo ad laboriosam perspiciatis beatae totam sapiente quibusdam officia facere aliquid iusto ducimus fuga. Iste vel, neque deleniti eligendi tenetur veritatis saepe, nobis veniam soluta debitis quo eos. Amet earum vel nam reiciendis! Possimus delectus odio error quod a eligendi et reprehenderit officia illum culpa consectetur perferendis, dolorem ab. Modi nulla quaerat dolorem quod, iure inventore eos nisi nemo ut aliquid quae architecto tenetur laboriosam quis. Esse similique praesentium modi nemo beatae libero quibusdam iste ullam doloribus! Ullam, doloribus nesciunt. Consequuntur vero non quod facere, sequi, provident placeat voluptatem dolore id neque vel voluptas nostrum suscipit, sapiente amet odio at. Minus at incidunt accusantium vero, quae facere quaerat aperiam. At consequuntur, ducimus incidunt porro earum quibusdam animi omnis autem optio similique enim assumenda pariatur cum quam culpa laudantium voluptatibus? Saepe non, ad inventore debitis alias, a eum doloremque ratione consectetur beatae minima deleniti molestias magni? Quaerat accusantium nulla natus quasi dolor ex adipisci ullam sed dignissimos suscipit consequuntur, dolorum aut quia quam vitae unde pariatur sunt animi. Fugiat vero eveniet autem? Tempore distinctio omnis voluptates vitae. Tempora, atque similique velit at laudantium repellendus sint! Porro a sunt id eos magni quod, doloremque.</p>
  </section>
  <section>
    <h1>Chapter 2</h1>
    <p>illum itaque minima, consequuntur suscipit repellat? Repellendus rerum at harum temporibus, illo aperiam ab pariatur dolores dignissimos distinctio voluptate, quibusdam aut ratione deleniti non ipsa id perspiciatis quas. Perspiciatis iste </p>
    <h3>Heading 2 on multiple lines that you can read here, here is what i say about those nice headings</h3>
    <p>et totam ipsam officiis quis obcaecati eius in reprehenderit ipsum! Nostrum iusto accusantium quibusdam fugit quam? Officiis, illo quasi porro pariatur et ipsa nisi necessitatibus </p>
    <h4>Third level heading Run-in is possible when the line is less</h4>
    <p>Reiciendis dolorem sit temporibus velit modi tempore, non delectus veritatis unde voluptas corporis eos, tempora in? Cupiditat</p>
    <h4>Heading 3 on multiple lines that you can read here, here is what i say about those nice headings</h4>
    <p>Reiciendis dolorem sit temporibus velit modi tempore, non delectus veritatis unde voluptas corporis eos, tempora in? Cupiditate quod quaerat deserunt cum omnis debitis non tempora, obcaecati nobis quis odit expedita distinctio? Harum similique placeat praesentium, voluptate qui esse repudiandae fugiat eveniet accusantium quibusdam cum perferendis hic quis assumenda incidunt facilis mollitia sunt sapiente rerum sit quo? Ab, nulla voluptatum enim autem iure perferendis expedita unde voluptatibus veritatis asperiores similique! Perferendis dolore quam beatae corrupti impedit! Ut, earum sint! Beatae similique sequi libero officia, officiis maiores iste necessitatibus reiciendis blanditiis eaque assumenda, tempore voluptates excepturi veniam neque id repellat nulla perferendis, ex quidem earum incidunt laudantium! Amet hic quam sunt voluptatem rerum? Accusantium quisquam mollitia at. Blanditiis ea porro odit. Unde accusamus hic dolorem eaque veniam aliquid consequatur dolorum, exercitationem deserunt esse nobis saepe commodi quasi possimus. Accusantium repellendus pariatur fuga quas suscipit excepturi sit praesentium quaerat quibusdam. Optio illum, quasi itaque, suscipit saepe eius minima, explicabo ad laboriosam perspiciatis beatae totam sapiente quibusdam officia facere aliquid iusto ducimus fuga. Iste vel, neque deleniti eligendi tenetur veritatis saepe, nobis veniam soluta debitis quo eos. Amet earum vel nam reiciendis! Possimus delectus odio error quod a eligendi et reprehenderit officia illum culpa consectetur perferendis, dolorem ab. Modi nulla quaerat dolorem quod, iure inventore eos nisi nemo ut aliquid quae architecto tenetur laboriosam quis. Esse similique praesentium modi nemo beatae libero quibusdam iste ullam doloribus! Ullam, doloribus nesciunt. Consequuntur vero non quod facere, sequi, provident placeat voluptatem dolore id neque vel voluptas nostrum suscipit, sapiente amet odio at. Minus at incidunt accusantium vero, quae facere quaerat aperiam. At consequuntur, ducimus incidunt porro earum quibusdam animi omnis autem optio similique enim assumenda pariatur cum quam culpa laudantium voluptatibus? Saepe non, ad inventore debitis alias, a eum doloremque ratione consectetur beatae minima deleniti molestias magni? Quaerat accusantium nulla natus quasi dolor ex adipisci ullam sed dignissimos suscipit consequuntur, dolorum aut quia quam vitae unde pariatur sunt animi. Fugiat vero eveniet autem? Tempore distinctio omnis voluptates vitae. Tempora, atque similique velit at laudantium repellendus sint! Porro a sunt id eos magni quod, doloremque.</p>
  </section>
  <section>
    <h1>Chapter 3</h1>
    <p>illum itaque minima, consequuntur suscipit repellat? Repellendus rerum at harum temporibus, illo aperiam ab pariatur dolores dignissimos distinctio voluptate, quibusdam aut ratione deleniti non ipsa id perspiciatis quas. Perspiciatis iste </p>
    <h2>Heading 2 on multiple lines that you can read here, here is what i say about those nice headings</h2>
    <p>et totam ipsam officiis quis obcaecati eius in reprehenderit ipsum! Nostrum iusto accusantium quibusdam fugit quam? Officiis, illo quasi porro pariatur et ipsa nisi necessitatibus </p>
    <h3>Third level heading Run-in is possible when the line is less</h3>
    <p>Reiciendis dolorem sit temporibus velit modi tempore, non delectus veritatis unde voluptas corporis eos, tempora in? Cupiditat</p>
    <h4 id="breakAfter">Break After Heading 4 on multiple lines that you can read here, here is what i say about those nice headings</h4>
    <p id="afterh4">Reiciendis dolorem sit temporibus velit modi tempore, non delectus veritatis unde voluptas corporis eos, tempora in? Cupiditate quod quaerat deserunt cum omnis debitis non tempora, obcaecati nobis quis odit expedita distinctio? Harum similique placeat praesentium, voluptate qui esse repudiandae fugiat eveniet accusantium quibusdam cum perferendis hic quis assumenda incidunt facilis mollitia sunt sapiente rerum sit quo? Ab, nulla voluptatum enim autem iure perferendis expedita unde voluptatibus veritatis asperiores similique! Perferendis dolore quam beatae corrupti impedit! Ut, earum sint! Beatae similique sequi libero officia, officiis maiores iste necessitatibus reiciendis blanditiis eaque assumenda, tempore voluptates excepturi veniam neque id repellat nulla perferendis, ex quidem earum incidunt laudantium! Amet hic quam sunt voluptatem rerum? Accusantium quisquam mollitia at. Blanditiis ea porro odit. Unde accusamus hic dolorem eaque veniam aliquid consequatur dolorum, exercitationem deserunt esse nobis saepe commodi quasi possimus. Accusantium repellendus pariatur fuga quas suscipit excepturi sit praesentium quaerat quibusdam. Optio illum, quasi itaque, suscipit saepe eius minima, explicabo ad laboriosam perspiciatis beatae totam sapiente quibusdam officia facere aliquid iusto ducimus fuga. Iste vel, neque deleniti eligendi tenetur veritatis saepe, nobis veniam soluta debitis quo eos. Amet earum vel nam reiciendis! Possimus delectus odio error quod a eligendi et reprehenderit officia illum culpa consectetur perferendis, dolorem ab. Modi nulla quaerat dolorem quod, iure inventore eos nisi nemo ut aliquid quae architecto tenetur laboriosam quis. Esse similique praesentium modi nemo beatae libero quibusdam iste ullam doloribus! Ullam, doloribus nesciunt. Consequuntur vero non quod facere, sequi, provident placeat voluptatem dolore id neque vel voluptas nostrum suscipit, sapiente amet odio at. Minus at incidunt accusantium vero, quae facere quaerat aperiam. At consequuntur, ducimus incidunt porro earum quibusdam animi omnis autem optio similique enim assumenda pariatur cum quam culpa laudantium voluptatibus? Saepe non, ad inventore debitis alias, a eum doloremque ratione consectetur beatae minima deleniti molestias magni? Quaerat accusantium nulla natus quasi dolor ex adipisci ullam sed dignissimos suscipit consequuntur, dolorum aut quia quam vitae unde pariatur sunt animi. Fugiat vero eveniet autem? Tempore distinctio omnis voluptates vitae. Tempora, atque similique velit at laudantium repellendus sint! Porro a sunt id eos magni quod, doloremque.</p>
  </section>
</body>
</html>
